<template>
  <div class="container">
    <v-header :goBack="true" :title="title" :showRight="true">
      <router-link to="/market/debit-credit" class="fa fa-home" slot="icon-right"></router-link>
    </v-header>
    <div class="about-us-content">
      <div class="content d-flex">
        <div class="d-flex flex-fill flex-column align-items-center">
          <img class="qr-code" src="/static/images/logo.png" alt="qr-code">
          <p>微信公众号：5U卡贝</p>
          <p>
            <a href="mailto:service@ganyinfo.com" class="link">客服邮箱：service@ganyinfo.com</a>
          </p>
          <p>
            <a href="mailto:service@ganyinfo.com" class="link">商务合作：bd@ganyinfo.com</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '@/components/header/head'

  export default {
    data() {
      return {
        title: '关于我们',
        avatar: '/static/images/logo.png'
      }
    },
    components: {
      'v-header': header
    }
  }
</script>

<style lang="stylus" type="text/stylus">
  @import "../../common/stylus/mixin.styl"
  @import "../../common/stylus/variable.styl"

  .about-us-content
    margin-top: 2rem
    .content
      position: absolute
      width: 100%
      line-height: 24px
      top: 50%
      left: 0%
      transform: translate(0%, -50%)
      .qr-code
        width: 80px
        height: 80px
      .link
        color: $color-light-blue
        text-decoration: underline
</style>
